
import './stopvehicle.scss'
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom'
import { Form, Input, Button, Popconfirm, Table, Modal, Message } from '@arco-design/web-react';
import mochaApi from '../../../API/mochaApi';
const FormItem = Form.Item;

const StopVehicle = () => {
    const navigate = useNavigate();
    const [fromStop] = Form.useForm()
    const pageSize = 5
    //表头数据
    const columns = [
        {
            title: '序号',
            render: (col, record, index) => `${index + 1}`,
            align: 'center'
        },
        {
            title: '停车场名称',
            dataIndex: 'parkingName',
        },
        {
            title: '停车场编号',
            dataIndex: 'parkingNum',
        },
        {
            title: '所属区域',
            dataIndex: 'parkingRegion',
        },
        {
            title: '详细地址',
            dataIndex: 'parkingLocation',
        },
        {
            title: '车位数',
            dataIndex: 'parkingSpaceNum',
        },
        {
            title: '通道数',
            dataIndex: 'parkingPassNum',
        },
        {
            title: '办理时间',
            dataIndex: 'parkingState',
            render: (col, record) => {
                if (record.parkingState === 0) {
                    return <span>未使用</span>
                } else if (record.parkingState === 1) {
                    return <span>正常</span>
                } else if (record.parkingState === 2) {
                    return <span>停用</span>
                }
            }
        },
        {
            title: '操作',
            render: (col, record) => <div className='operation'>
                <span onClick={() => onModalDisplay(record)}>修改</span>
                <Popconfirm
                    title='确定要删除吗？'
                    onOk={() => deleteBtn(record)}
                >
                    <span>删除</span>
                </Popconfirm>
            </div >
        },
    ];
    //表格数据
    const [data, setData] = useState([])
    //获取表格所有数据
    const getData = () => {
        mochaApi.getStopData().then((res) => {
            if (res.code === 200) {
                setData(res.result)
            }
        })
    }
    useEffect(() => {
        getData()
    }, [])
    // 查询
    const queryBtn = () => {
        let value = fromStop.getFieldsValue()
        mochaApi.stopQuery(value).then((res) => {
            if (res.code === 200) {
                setData(res.result)
            }
        })
    }
    //重置
    const resetBtn = () => {
        fromStop.clearFields()
        getData()
    }
    // 表格删除
    const deleteBtn = (value) => {
        mochaApi.stopDelete(value.parkingId).then((res) => {
            if (res.code === 200) {
                getData()
                Message.success('删除成功')
            } else {
                Message.error('删除失败')
            }
        })
    }
    const [modifyVisible, setModifyVisible] = useState(false);
    const [form] = Form.useForm();
    //修改弹出框---显示
    const onModalDisplay = (record) => {
        setModifyVisible(true)
        form.setFieldsValue(record)
    }
    //修改弹出框---确定
    const onDetermine = () => {
        let value = form.getFieldsValue()
        mochaApi.stopModify(value).then((res) => {
            if (res.code === 200) {
                Message.success('修改成功')
                setModifyVisible(false)
                getData()
            } else {
                Message.error('修改失败')
            }
        })
    }
    return <div className='stopvehicle'>
        <div className='formBox'>
            <Form form={fromStop} className='formBoxFrom' layout='inline' colon size='default'>
                <FormItem label='停车场名称' field='parkingName' >
                    <Input placeholder='请输入' />
                </FormItem>
                <FormItem label='停车场编号' field='parkingNum' >
                    <Input placeholder='请输入' />
                </FormItem>
                <FormItem label='所属位置' field='parkingRegion' >
                    <Input placeholder='请输入' />
                </FormItem>
            </Form>
            <div className='export'>
                <Button type='primary' onClick={queryBtn} >查询</Button>
                <Button type='outline' onClick={resetBtn}>重置</Button>
                <Button type='primary' onClick={() => navigate('/home/addStopVehicle')}>新建</Button>
            </div>
        </div>
        <Table border borderCell
            rowKey={(record) => record.parkingId}
            columns={columns}
            data={data}
            pagination={{
                pageItemStyle: { border: "1px solid #ccc", borderRadius: '5px' },
                activePageItemStyle: { backgroundColor: '#1890ff', color: '#fff' },
                sizeCanChange: true, size: 'mini', pageSize: pageSize,
                showTotal: (total, range) => `共 ${total} 条 第 ${range[1] / pageSize} / ${Math.ceil(total / pageSize)} 页`
            }}
        />
        {/* 修改弹出框 */}
        <Modal
            title='修改'
            visible={modifyVisible}
            onOk={onDetermine}
            onCancel={() => { setModifyVisible(false); form.clearFields() }}>
            <Form
                form={form}
                labelCol={{
                    span: 4,
                    style: { flexBasis: 90 },
                }}
                wrapperCol={{
                    span: 20,
                    style: { flexBasis: 'calc(100% - 90px)' },
                }}
            >
                <FormItem label='停车场ID' field='parkingId'>
                    <Input disabled placeholder='' />
                </FormItem>
                <FormItem label='停车场名称' field='parkingName'>
                    <Input placeholder='' />
                </FormItem>
                <FormItem label='停车场编号' field='parkingNum'>
                    <Input placeholder='' />
                </FormItem>
                <FormItem label='所属区域' field='parkingRegion'>
                    <Input placeholder='' />
                </FormItem>
                <FormItem label='详细地址' field='parkingLocation'>
                    <Input placeholder='' />
                </FormItem>
                <FormItem label='车位数' field='parkingSpaceNum'>
                    <Input placeholder='' />
                </FormItem>
            </Form>
        </Modal>
    </div>
}
export default StopVehicle
